﻿@{
    ViewBag.Title = "";
    var F = Html.F();
}

@section head {
    <style>
        .userimage img {
            height:100px;
            width:100px;
            border-radius:50%;
            box-shadow:1px 1px 10px 1px rgba(255,255,255,.8);
        }

        .userimage.small img {
            height:50px;
            width:50px;
            margin-top:20px;
        }

        .icononlyaction {
            transition:transform .3s;
            transform-style:preserve-3d;
        }

        .icononlyaction.small {
            transform: rotateY(180deg);
        }

        #meuntitle {
            margin-bottom:0px;
        }
    </style>
}


@section body {
    @(F.Panel().ShowBorder(false).ShowHeader(false).Layout(LayoutType.Region).IsViewPort(true)
      .Items(
        F.Panel().ID("Left").ShowHeader(false)
        .ShowBorder(false).RegionPosition(Position.Left).Width(260).Layout(LayoutType.VBox)
        .CssClass("bgpanel")
        .Items(
            F.Panel().ShowHeader(false)
            .ShowBorder(false)
            .Layout(LayoutType.VBox)
            .BoxConfigAlign(BoxLayoutAlign.Center)
            .Items(
                F.Image()
                .ID("userimage")
                .ImageUrl(Url.Content("~/res/images/my_face_80.jpg")).CssClass("userimage"),
                F.Label()
                .ID("userrole").Text("你好，大脑袋，"+ ViewBag.userrole)
                ),
             F.Tree()
             .ID("treeMenu")
             .ShowHeader(false).ShowBorder(false).BoxFlex(1)
             .Nodes(ViewBag.TreeMenuNodes)
            ),
        F.Panel().ID("Center").ShowBorder(false).ShowHeader(false).RegionPosition(Position.Center)
        .Layout(LayoutType.VBox)
        .Items(
            F.Panel()
            .ID("centerTop")
            .Height(50)
            .ShowBorder(false)
            .ShowHeader(false)
            .CssClass("bgpanel")
            .Layout(LayoutType.HBox)
            .BoxConfigAlign(BoxLayoutAlign.Center)
            .Items(
                F.Button().ID("foldButton").CssClass("icononlyaction").ToolTip("折叠/展开侧边栏").IconAlign(IconAlign.Top).IconFont(IconFont._Fold).EnableDefaultState(false).EnableDefaultCorner(false).TabIndex(-1)
                //.Listener("click", "onFoldClick")
                .OnClientClick("onFoldClick()")
                ,
                F.Label().ID("meuntitle").Text("系统管理-用户管理"))
            ,
            F.TabStrip()
            .ID("mainTabStrip")
            .ShowBorder(false)
            .BoxFlex(1)
            .EnableTabCloseMenu(true)
            .Listeners(new Listener("tabchange","onTabChange"))
            .Tabs(
                F.Tab().Title("首页").IconFont(IconFont.Home),
                F.Tab().Title("菜单页").EnableIFrame(true).IFrameUrl(Url.Action("SysLogin"))
                )
            )
      )
    )
}


@section script {
    <script>
        //收起展开左侧树
        const onFoldClick = () => {
            //标记展开还是收起
            //收起 宽度 60 展开 260 
            //树变成 mini
            //图片大小
            //按钮图标 展开 收起
            const {
                Left,//左侧收起
                treeMenu,//树mini
                userrole,//角色名 不显示
                userimage,//图标变大小
                foldButton//按钮
            } = F.ui;

            //修改状态 
            Left.Colapse = !Left.Colapse;
            //mini
            treeMenu.miniMode = Left.Colapse;
            // 重新加载树菜单
            treeMenu.loadData();
            //显示
            userrole.setVisible(!Left.Colapse);
            //修改样式
            [userimage, foldButton].forEach((item) => {
                item.el.toggleClass("small");
            })

            Left.setWidth(Left.Colapse ? 60 : 260);//执行布局
            Left.doLayout();
        }

        F.ready(() => {
            const { treeMenu, mainTabStrip, meuntitle } = F.ui;

            // 初始化主框架中的树(或者Accordion+Tree)和选项卡互动，以及地址栏的更新
            // treeMenu： 主框架中的树控件实例，或者内嵌树控件的手风琴控件实例
            // mainTabStrip： 选项卡实例
            // options: 参数
            // options.updateHash： 切换Tab时，是否更新地址栏Hash值（默认值：true）
            // options.refreshWhenExist： 添加选项卡时，如果选项卡已经存在，是否刷新内部IFrame（默认值：false）
            // options.refreshWhenTabChange: 切换选项卡时，是否刷新内部IFrame（默认值：false）
            // options.maxTabCount: 最大允许打开的选项卡数量
            // options.maxTabMessage: 超过最大允许打开选项卡数量时的提示信息
            // options.beforeNodeClick: 节点点击事件之前执行（返回false则不执行点击事件）
            // options.beforeTabAdd: 添加选项卡之前执行（返回false则不添加选项卡）
            // options.moveToEnd: 将选项卡移到尾部（如果选项卡已存在，则不改变位置，默认值：false）
            const initOptions = {
                maxTabCount: 10,
                moveToEnd: true,
                beforeTabAdd: (e, tabOptions, treeNodeId) => {

                    // 手工调用F.addMainTab也会运行到这里，由于不是点击左侧树节点触发的，所以此时treeNodeId为空
                    if (!treeNodeId) {
                        return;
                    }

                    const parentNode = treeMenu.getParentData(treeNodeId);
                    let text = `${parentNode.text}-${tabOptions.title}`;
                    tabOptions.titleText = text;
                    meuntitle.setText(text);
                }
            }
            F.initTreeTabStrip(treeMenu, mainTabStrip, initOptions);

            var newItem = new F.MenuItem({
                text: '刷新',
                handler: function () {
                    var tab = this.parent.target;
                    if (tab.isType('tab')) {
                        tab.refreshIFrame();
                    }
                }
            })

            var closeMenu = F.ui.mainTabStrip.getCloseMenu();
            // 将自定义菜单项插入结束位置
            closeMenu.add([new F.MenuSeparator(), newItem]);

            closeMenu.on("beforeshow", function () {
                //没有就隐藏
                if (!this.target.iframe) {
                    this.items[4].hide();
                    this.items[5].hide();
                } else {
                    this.items[4].show();
                    this.items[5].show();
                }
            })
        })
        const onTabChange = function (e, tab) {
            const { meuntitle } = F.ui;
            meuntitle.setText(tab.titleText);
        }
    </script>
}
